import React, { useState, useEffect } from 'react';
import { Progress, Button, Card } from 'antd';
import 'antd/dist/reset.css';

const ModelUpdate = () => {
  // 状态管理
  const [progress, setProgress] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [statusText, setStatusText] = useState("准备开始任务...");

  // 模拟的文本内容数组，后续可以替换成你自己的内容
  const textContent = [
    "系统初始化中...",
    "正在加载基础配置...",
    "验证用户权限成功",
    "连接到主服务器",
    "数据同步开始",
    "已同步 20% 的数据",
    "优化资源加载策略",
    "已同步 40% 的数据",
    "处理用户偏好设置",
    "已同步 60% 的数据",
    "检查网络连接稳定性",
    "已同步 80% 的数据",
    "准备完成最后的配置",
    "数据同步完成",
    "任务已全部完成，准备就绪"
  ];

  // 进度更新逻辑
  useEffect(() => {
    let timer;
    
    if (isRunning && progress < 100) {
      timer = setInterval(() => {
        setProgress(prev => {
          const newProgress = prev + 1;
          
          // 根据进度更新文本内容
          const textIndex = Math.min(
            Math.floor((newProgress / 100) * textContent.length),
            textContent.length - 1
          );
          setStatusText(textContent[textIndex]);
          
          // 当进度达到100%时停止
          if (newProgress === 100) {
            setIsRunning(false);
          }
          
          return newProgress;
        });
      }, 200); // 每200ms更新一次
    }
    
    return () => clearInterval(timer);
  }, [isRunning, textContent]);

  // 控制按钮点击事件
  const handleControlClick = () => {
    if (progress === 100) {
      // 重置进度
      setProgress(0);
      setStatusText("准备开始任务...");
      setIsRunning(true);
    } else {
      // 切换运行状态
      setIsRunning(!isRunning);
    }
  };

  return (
    <Card title="文本与进度条演示" style={{ maxWidth: 600, margin: '20px auto' }}>
      {/* 文本区域 - 随进度变化 */}
      <div style={{ 
        marginBottom: 20, 
        padding: 16, 
        border: '1px solid #e8e8e8', 
        borderRadius: 4,
        minHeight: 60,
        display: 'flex',
        alignItems: 'center',
        backgroundColor: '#fafafa'
      }}>
        {statusText}
      </div>
      
      {/* 普通进度条 - 在下方 */}
      <div style={{ marginBottom: 20 }}>
        <Progress 
          percent={progress} 
          status={progress === 100 ? "success" : "active"}
          strokeWidth={8}
        />
      </div>
      
      {/* 控制按钮 */}
      <Button 
        type="primary" 
        onClick={handleControlClick}
      >
        {isRunning ? '暂停' : progress === 100 ? '重新开始' : '开始'}
      </Button>
    </Card>
  );
};

export default ModelUpdate;
